<template>
	<view>
		<image src="/static/common/bg1.png" class="pagebg1" mode=""></image>
		<u-navbar :safeAreaInsetTop="true" leftIcon=" " :autoBack="false" :bgColor="'rgba(255,255,255,'+opc+')'"
			placeholder>
			<view class="searchbox" slot="center">
				<image src="/static/home/sousuo.png" class="searchbox__icon" mode=""></image>
				<input type="text" placeholder="搜索关键词" class="searchbox__inp" v-model="keyword" />
				<view class="searchbox__btn" @click="search">
					搜索
				</view>
			</view>
		</u-navbar>
		<view class="tab">
			<u-tabs :list="list4" lineWidth="38rpx" lineColor="#E3432D" lineHeight='9rpx' @click="chick"
				:current="current" :activeStyle="{
			            color: '#E3432D',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#101010',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 28rpx; padding-right: 28rpx; height: 58rpx;font-size:31rpx;">
				<!-- 	<view slot="right" style="padding-right: 30rpx;padding-left: 10rpx;" @tap="$u.toast('插槽被点击')">
					<u-icon name="list" color="#101010" size="40rpx" bold></u-icon>
				</view> -->
			</u-tabs>
		</view>
		<view class="pagecon"
			:style="{height: 'calc(100vh - 44px - 20rpx - 58rpx - 142rpx - '+$u.addUnit($u.sys().statusBarHeight + $u.sys().safeAreaInsets.bottom,'px')+')'}">
			<scroll-view scroll-y="true" style="height: 100%;">
				<view class="con">
					<u-swiper :list="banners" height="300rpx" radius="30rpx" bgColor="transparent"></u-swiper>
					<view class="t">
						<view class="u-flex u-flex-column u-flex-items-center" v-for="(item,index) in list2"
							:key="index" @click="navto(item.url)">
							<image :src="'/static/home/t'+index+'.png'" :style="item.sty" class="t__icon" mode="">
							</image>
							<view class="t__text">
								{{item.text}}
							</view>
						</view>
					</view>
					<!-- 		<view class="xians" @click="navto('/pages/goods/panic')">
						<image src="/static/home/xias.png" style="width: 690rpx;height: 214rpx;" mode=""></image>
					</view> -->
					<view class="tabs xians" style="justify-content: space-between;">
						<view class="tab" style="width: 45%;" @click="navto('/pages/goods/panic')">
							<view class=""
								style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 10rpx;">
								<view class="" style="font-weight: 600;">
									限时抢购
								</view>
								<view class="tip"
									style="color: #fff;background-color:#74b2fd;border-radius: 100px 100px 100px 20rpx;font-size: 22rpx;padding: 4rpx;">
									限时抢购 快来
								</view>

							</view>
							<view class="" style="display: flex;">
								<view class=""
									style="width: 50%;display: flex;flex-direction: column;align-items: center;"
									v-if="list5.length>=1">
									<image :src="$getImg(list5[0].goods.image)" mode=""
										style="width: 100rpx;height: 100rpx;"></image>
									<view class="" style="display: flex;border-radius: 100px;overflow: hidden;">
										<view class=""
											style="background-color: red;color: #fff;font-size: 16rpx;padding:0 4rpx;">
											到手价
										</view>
										<view class=""
											style="color: red;font-size: 18rpx;background-color: #FEEBEC;padding:0 6rpx;font-weight: 600;">
											<text style="font-size: 14rpx;"><text style="font-size: 12rpx;">￥</text> </text>{{list5[0].goods.price}}
										</view>
									</view>
								</view>
								<view class=""
									style="width: 50%;display: flex;flex-direction: column;align-items: center;"
									v-if="list5.length>=2">
									<image :src="$getImg(list5[1].goods.image)" mode=""
										style="width: 100rpx;height: 100rpx;"></image>
									<view class="" style="display: flex;border-radius: 100px;overflow: hidden;">
										<view class=""
											style="background-color: red;color: #fff;font-size: 16rpx;padding:0 4rpx;">
											到手价
										</view>
										<view class=""
											style="color: red;font-size: 18rpx;background-color: #FEEBEC;padding:0 6rpx;font-weight: 600;">
											<text style="font-size: 14rpx;"><text style="font-size: 12rpx;">￥</text> </text>{{list5[1].goods.price}}
										</view>
									</view>
								</view>

							</view>
						</view>
						<view class="tab tab1" style="width: 45%;" @click="navto('/pages/goods/panic1')">
							<view class=""
								style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 10rpx;">
								<view class="" style="font-weight: 600;">
									特价优惠
								</view>
								<view class="tip"
									style="color: #fff;background-color:#70D4A5;border-radius: 100px 100px 100px 20rpx;font-size: 22rpx;padding: 4rpx;">
									特价优惠 快来
								</view>

							</view>
							<view class="" style="display: flex;">
								<view class=""
									style="width: 50%;display: flex;flex-direction: column;align-items: center;"
									v-if="list6.length>=1">
									<image :src="$getImg(list6[0].goods.image)" mode=""
										style="width: 100rpx;height: 100rpx;"></image>
									<view class="" style="display: flex;border-radius: 100px;overflow: hidden;">
										<view class=""
											style="background-color: red;color: #fff;font-size: 16rpx;padding:0 4rpx;">
											到手价
										</view>
										<view class=""
											style="color: red;font-size: 18rpx;background-color: #FEEBEC;padding:0 6rpx;font-weight: 600;">
											<text style="font-size: 14rpx;"><text style="font-size: 12rpx;">￥</text> </text>{{list6[0].goods.price}}
										</view>
									</view>
								</view>
								<view class=""
									style="width: 50%;display: flex;flex-direction: column;align-items: center;"
									v-if="list6.length>=2">
									<image :src="$getImg(list6[1].goods.image)" mode=""
										style="width: 100rpx;height: 100rpx;"></image>
									<view class="" style="display: flex;border-radius: 100px;overflow: hidden;">
										<view class=""
											style="background-color: red;color: #fff;font-size: 18rpx;padding:0 4rpx;">
											到手价
										</view>
										<view class=""
											style="color: red;font-size: 18rpx;background-color: #FEEBEC;padding:0 6rpx;font-weight: 600;">
											<text style="font-size: 14rpx;"><text style="font-size: 12rpx;">￥</text> </text>{{list6[1].goods.price}}
										</view>
									</view>
								</view>
							</view>

						</view>
					</view>
				</view>
				<view class="u-flex u-flex-y-center u-flex-between u-flex-wrap" style="padding: 0 20rpx;">
					<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无商品"
						v-if="goodsList.length==0" style="margin: 0 auto;margin-bottom: 30rpx;">
					</u-empty>
					<proitem v-for="(item,index) in goodsList" :key="index" :info="item"></proitem>
				</view>
			</scroll-view>
		</view>

		<tabbar :current="0"></tabbar>
	</view>
</template>

<script>
	import {
		userInfo
	} from "@/request/api/my.js"
	import {
		getType,
		getGoods,
		getLimitGoods,
		getSpecialGoods,
		banner
	} from "@/request/api/goods.js"
	export default {
		data() {
			return {
				opc: 0,
				list4: [],
				list1: [

				],
				current: 0,
				keyword: "",
				goodsList: [],
				list5: [],
				list6: [],
				banners: [],
				list2: [{
						text: '商品带货',
						url: '/pages/personal/authentication',
						sty: 'width: 84rpx;height: 69rpx;'
					},
					{
						text: '我的股东',
						url: '',
						sty: 'width: 80rpx;height: 67rpx;'
					},
					{
						text: '我的直播',
						url: '/pages/personal/live',
						sty: 'width: 87rpx;height: 79rpx;'
					},
					{
						text: '我的抽奖',
						url: '/pages/points/raffle',
						sty: 'width: 81rpx;height: 80rpx;'
					},
					{
						text: '我的积分',
						url: '/pages/points/details',
						sty: 'width: 69rpx;height: 78rpx;'
					},
				]
			};
		},
		onLoad() {
			uni.hideTabBar()
			userInfo().then(res => {
				uni.setStorageSync('userInfo', res.data)
			})
			getLimitGoods().then(res => {
				this.list5 = res.data;
			})
			getSpecialGoods().then(res => {
				this.list6 = res.data;
			})
			getType().then(res => {
				this.list4 = res.data;
				this.getList()
			})
			banner().then(res => {
				this.banners = res.data.map(item => {
					return this.$getImg(item.image)
				});
				console.log(this.banners)

			})
		},
		methods: {
			search() {
				if (this.keyword) {
					uni.navigateTo({
						url: `/pages/search/search?current=${this.current}&keyword=${this.keyword}`
					})
				}

			},
			chick(e) {
				if (this.current == e.index) return;
				this.current = e.index;
				this.getList()
			},
			getList() {
				this.goodsList = [];
				getGoods({
					type_id: this.list4[this.current].id
				}).then(res => {
					this.goodsList = res.data;
				})
			}
		}
	}
</script>

<style lang="scss">
	.tabs {
		display: flex;

		.tab {
			background: linear-gradient(to bottom, #6ea1ff, #fff, #fff, #fff, #fff);
			border-radius: 30rpx;
			padding: 10rpx;
		}

		.tab1 {
			background: linear-gradient(to bottom, #C5EDD7, #fff, #fff, #fff, #fff);
		}
	}

	.searchbox {
		width: 690rpx;
		height: 73rpx;
		background: #FEFEFE;
		border-radius: 37rpx 37rpx 37rpx 37rpx;
		display: flex;
		align-items: center;

		&__icon {
			width: 32rpx;
			height: 32rpx;
			margin: 0 10rpx 0 38rpx;
		}

		&__inp {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333;
			flex: 1;
		}

		&__btn {
			width: 118rpx;
			height: 64rpx;
			background: #E3432D;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFD;
			margin-right: 4rpx;
		}
	}

	.tab {
		padding: 10rpx 0;
	}

	.con {
		padding: 10rpx 30rpx 0;

		.t {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			margin-top: 35rpx;

			&__i {}

			&__icon {
				margin-bottom: calc(11rpx - 4px);
			}

			&__text {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 25rpx;
				color: #000000;
				line-height: 25rpx;
			}
		}
	}

	.xians {
		margin-top: 54rpx;
		margin-bottom: 24rpx;
	}
</style>